<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .user {
            width: 500px;
            display: flex;
            flex-flow: row nowrap;
            border: 1px solid #cccccc;
            box-shadow: 0px 0px 10px #cccccc;
            border-radius: 12px;
            overflow: hidden;
            margin: 10px;
        }

        .user .head {
            width: 150px;
            height: 150px;
            flex-shrink: 0;
            overflow: hidden;
        }

        .user .head img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        .user .info {
            flex-grow: 1;
            font-size: 14px;
            line-height: 1.7;
            letter-spacing: 2px;
            list-style: none;
            padding-left: 26px;
        }

        .user .info span:first-child {
            display: inline-block;
            width: 80px;
            text-align: justify;
            text-align-last: justify;
            color: #007bff;
        }

        .user .info i {
            font-style: normal;
            padding: 0px 10px;
            color: #aaaaaa;
        }
    </style>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- <userInfo></userInfo> -->
    <div id="app">
        <h1>用户信息列表:</h1>
        <!-- HTML是忽略大小写-所不支持驼峰方式的标签名 -->
        <!-- <userInfo></userInfo> -->
        <!-- 驼峰组件名称，在页面中通过 链子符 转换后调用 -->
        <!-- 标签名称在页面不会被保留 -->
        <!-- 组件标签的每次调用，都会启动一个vue实例的生命周期完成实例构成 -->
        <user-info v-for="(item, index) in 1" :key="'userInfo'+index"></user-info>
        <hr>
        <user-info-temp v-for="(item, index) in 1" :key="'userInfoTemp'+index"></user-info-temp>
        <hr>
        <local-user-info></local-user-info>
        <hr>
        <local-user-info-two></local-user-info-two>
    </div>
</body>
<script type="text/x-template" id="user">
    <div class="user">
        <div class="head">
            <img src="./img/user.jpg">
        </div>
        <ul class="info">
            <li>
                <span>姓名</span>
                <i>:</i>
                <span>{{ name }}</span>
            </li>
            <li>
                <span>性别</span>
                <i>:</i>
                <span>男</span>
            </li>
            <li>
                <span>出生日期</span>
                <i>:</i>
                <span>2021年2月1日</span>
            </li>
            <li>
                <span>电话</span>
                <i>:</i>
                <span>1891000000</span>
            </li>
            <li>
                <span>身份证号码</span>
                <i>:</i>
                <span>342400000000000000</span>
            </li>
        </ul>
    </div>
</script>
<script>
    let UserInfo = Vue.extend({
        template:"#user",
        data(){
            return {
                name:"测试"
            }
        },
        beforeCreate() {
            console.log("UserInfo==>beforeCreate");
        },
        mounted() {
            console.log("UserInfo==>mounted");
        },
    });

    // 全局组件定义 
    // "子类"：以Vue构造器为构成参考结构，传入开发的默认配置，实现基于该配置的多vue实例创建使用的新构造器
    // 将vue的 "子类" 构造器 作为配置参数，传递给Vue全局组件构成函数 Vue.component 进行标签生成
    // Vue.component(id|tag-name,definition)
    //    id|tag-name:string 定义基于新子类构造器创建的标签名称
    //          1、使用范围：必须被使用与一个Vue实例的容器中，才会触发vue的组件解析语法
    //                      针对于当前标签寻找对应组件配置，装载该组件的默认数据（包含页面结构）
    //    definition:Function|Object 描述当前自定义组件标签对应的 vue子类构造器或者配置项
    Vue.component("userInfo",UserInfo);

    Vue.component("user-info-temp",{
        // 该配置对象为 Vue.extend 函数的合法配置参数
        // 通过传入 Vue.extend 函数需要配置，由Vue内部代码自行判断并完成 Vue.extend 的调用
        template:"#user",
        data(){
            return {
                name:"测试"
            }
        },
        beforeCreate() {
            console.log("user-info-temp==>beforeCreate");
        },
        mounted() {
            console.log("user-info-temp==>mounted");
        },
    });

    // 在项目中通过非组件技术直接 构建的vue实例，被叫做Root实例-根实例
    new Vue({
        el:"#app",
        // 局部组件配置，组件实例构建时的组件配置项 components
        // components 为当前vue实例提供局部范围的自定义组件标签
        // components ：{ key:value }
        //      key string 定义基于新子类构造器创建的标签名称
        //      value Function|Object 描述当前自定义组件标签对应的 vue子类构造器或者配置项
        components:{
            localUserInfo:UserInfo,
            "local-user-info-two":{
                template:"#user",
                data(){
                    return {
                        name:"测试"
                    }
                },
                beforeCreate() {
                    console.log("local-user-info-two==>beforeCreate");
                },
                mounted() {
                    console.log("local-user-info-two==>mounted");
                },
            }
        }
    })
</script>
</html>